<!--
 * @Author: WuFeng <763467339@qq.com>
 * @Date: 2024-06-05 23:03:10
 * @LastEditTime: 2024-06-06 09:23:21
 * @LastEditors: WuFeng <763467339@qq.com>
 * @Description: 站点管理
 * @FilePath: \chu-meng\client\src\pages\Project\page\site\index.vue
 * Copyright 版权声明
-->
<template>
  <div class="handleWrap">
    <a-button type="primary" @click="handleCreate">
      <template #icon>
        <PlusOutlined />
      </template>
      新建站点
    </a-button>
  </div>
  <div class="projectList">
    <a-row :gutter="16">
      <a-col class="gutter-row" :span="6" v-for="item in 8" :key="item">
        <a-card hoverable>
          <h2 class="name">站点名称</h2>
          <div class="desc">
            站点描述
          </div>
          <p class="info">
            已建页面：1个
          </p>
          <p class="date">
            2024年6月3日
          </p>
          <template #actions>
            <setting-outlined key="setting" title="进入开发工作台" @click="handleClickSiteManage(item)"/>
            <edit-outlined key="edit" title="编辑" @click="handleUpdate(item)"/>
            <a-dropdown v-model:open="visible">
              <ellipsis-outlined key="ellipsis" title="更多" />
              <template #overlay>
                <a-menu @click="handleMenuClick">
                  <a-menu-item key="1">
                    <a-button type="link" size="small">
                      预览
                    </a-button>
                  </a-menu-item>
                  <a-menu-item key="2">
                    <a-popconfirm
                      title="您确定要删除吗？"
                      @confirm="onConfirmDelete"
                    >
                      <a-button type="link" danger size="small">
                        删除
                      </a-button>
                    </a-popconfirm>
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </template>
        </a-card>
      </a-col>
    </a-row>
  </div>
  <CreateDrawer ref="CreateDrawerRef"></CreateDrawer>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { PlusOutlined, SettingOutlined, EditOutlined, EllipsisOutlined } from '@ant-design/icons-vue'
import CreateDrawer from './components/CreateDrawer.vue'

const router = useRouter()

const CreateDrawerRef = ref(null)

// 新建站点
const handleCreate = () => {
  if (CreateDrawerRef.value) {
    CreateDrawerRef.value.onShow({
      type: 'create'
    })
  }
}

// 编辑站点
const handleUpdate = (row) => {
  if (CreateDrawerRef.value) {
    CreateDrawerRef.value.onShow({
      type: 'update',
      row
    })
  }
}

// 删除站点
const onConfirmDelete = (row) => {
}

// 管理站点
const handleClickSiteManage = () => {
  router.push({
    name: 'Design'
  })
}


</script>

<style lang="scss" scoped>
.handleWrap{
  margin-bottom: 8px;
  display: flex;
  justify-content: flex-end;
}
.projectList{
  .gutter-row{
    margin: 8px 0;
    :deep(.ant-card-body){
      padding: 16px;
      .name{
        font-size: 16px;
        font-weight: bold;
      }
      .desc{
        font-size: 14px;
        color: #999;
        height: 100px;
      }
      .date{
        display: flex;
        color: #999;
      }
    }
  }
}
</style>

